<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>登录</title>
		<link rel="stylesheet" href="css/style.css">
		<style type="text/css">
			body {
				background-image: url(img/bg.jpg);
				width: 100%;
				height: 100%;
				min-width: 1000px;
				z-index: -10;
				zoom: 1;
				background-repeat: no-repeat;
				background-size: cover;
				-webkit-background-size: cover;
				background-position: center 0;
			}
			html body{
				height: 100%;
				width: 100%;
			}
			section{
				width: 100%;
			}
			form{
				text-align: center;
				margin: 10px auto 0;
				width: 230px;
				height: 200px;
				
			}
			.form_input{
				width: 184px;
				height: 29px;
				line-height: 29px;
				margin-bottom: 16px;
				border: 0;
				text-indent: 10px;
			}
			.form_button{
				display: inline-block;
				background-color: #f40;
			}
			.form_button:hover{
				background-color: rgb(255,103,0);
			}
			form a{
				text-decoration: none;
				color: #6c6c6c;
				float: right;
				margin-right: 29px;
			}
		</style>
	</head>
	<body>
		<header class="header_status">
			<p class="login_header"><a href="index.html">欢迎登录</a></p>
		</header>
		<body>
			<section>
				<form action="#">
					账户登录<br /><br/>
					<input class="form_input" id="username" type="text" placeholder="手机号/邮箱" autofocus><br />
					<input class="form_input" id="password" type="password" placeholder="密码"><br />
					<button class="form_input form_button" id="login" type="submit" >登&nbsp;&nbsp;录</button><br/>
					<a href="#">忘记密码</a>
					<a href="register.html">还没注册？</a>
				</form>
			</section>
			<script type="text/javascript" src="js/jquery.js"></script>
			<script type="text/javascript">
				function initdb() {
				    var db = openDatabase('mydb', '1.0', 'userinfo', 2 * 1024 * 1024);
				    db.transaction(function (tx) {
				        tx.executeSql('CREATE TABLE IF NOT EXISTS USERINFO (username, password);');
				    });
				}
				
				function login(username, password) {
				    var db = openDatabase('mydb', '1.0', 'userinfo', 2 * 1024 * 1024);
				    db.transaction(function (tx) {
				        tx.executeSql('SELECT * FROM USERINFO WHERE username = ?;', [username], function (tx, results) {
				            var len = results.rows.length;
				            if (len <= 0)
				                alert("用户不存在！");
				            else {
				                if (results.rows.item(0).password == password) {
				                    alert("登录成功！");
				                    sessionStorage.username = username;
									location.href="index.html";
				                } else {
				                    alert("密码错误！");
				                }
				            }
				        }, null);
				    });
				}
				
				$(document).ready(function() {
					initdb();
				});
				
				// 登录
				 $("#login").on('click', function () {
					var username = $("#username").val();
					var password = $("#password").val();
					if (username != "" & password != "")
						login(username, password);
				});
			</script>
		</body>
</html>
